<!-- MyAccumulatePoints_Win.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>个人轨迹老师端win</title>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<link rel="stylesheet" type="text/css" href="../../css/timeline.css"/>
		<!--<link rel="stylesheet" href="../../css/mui.min.css"/>-->
		<style>
			html, body {
				background-color: #FFFFFF;
				font-size: 12px;
			}
			.top-chart-div {
				height: 250px;
			}
			.line-div {
				height: 1px;
				width: 100%;
				border-top: 1px solid #dedede;
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			.year_title {
				width: 42%;
				padding: 2px 4px;
				color: #FFFFFF;
				font-size: 12px;
			}
			.year {
				border: 1px solid #06bcff;
				width: 20%;
				height: 25px;
				margin-left: 22px;
				line-height: 25px;
				text-align: center;
				border-radius: 3px;
				margin-top: 5px;
				background: #06bcff url(../../icon/jiaobiao_down2.png) no-repeat 93% center;
				background-size: 10px;
			}
			.yuefen {
				width: 12%;
			}
			.tuijiDiv {
				font-size: 12px;
				background: #fff;
				padding: 8px;
				width: 95%;
				min-height: 40px;
				height: auto;
				overflow: hidden;
				border-radius: 3px;
				position: relative;
				left: 12px;
				padding-left: 15px;
				box-shadow: 0px 5px 5px rgba(0,0,0,.1);
			}
			.sanjiao {
				width: 0;
				height: 0;
				border-width: 1.3rem;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
				position: absolute;
				top: 18%;
				left: 0;
				margin-top: -.1rem;
			}
			.guiji_dian {
				position: absolute;
				width: 5px;
				height: 5px;
				border: 4px solid #fff;
				background: #06bcff;
				border-radius: 50%;
				left: -8px;
				top: 25px;
			}
			.line_clock {
				width: 73%;
				margin-left: 13px;
				padding: 15px 0 15px 15px;
				border-left: 2px solid #06bcff;
				position: relative;
			}
			.clock {
				width: 30px;
				position: absolute;
				/*left: 17.5%;*/
				/*margin-left: 23px;*/
			}
			.clock_left {
				padding-right: 15px;
				text-align: right;
				padding: 3px 0;
				width: 12%;
				float: left;
			}
			.clock_right {
				float: left;
				width: 73%;
				/*margin-left: 9px;*/
				/*padding: 8px 0 15px 15px;*/
			}
			.month {
				width: 20%;
				height: 25px;
				margin-left: 22px;
				line-height: 25px;
				text-align: center;
				margin-top: 5px;
				background: url(../../icon/jiaobiao_down.png) no-repeat 93% center;
				background-size: 10px;
			}
			.month_title {
				/*width: 66%;*/
				padding: 2px 4px;
				color: #06bcff;
			}
			.guijiItemHd_month {
				height: 40px;
				line-height: 40px;
				/*cursor: pointer;*/
				overflow: hidden;
			}
			.guijiItemBd {
				background: url(../../icon/guijiLiBg.png) no-repeat -95.5% bottom;
				padding-bottom: 15px;
			}
			.guijiLi {
				background: unset;
				padding-bottom: 0px
			}
			.yuefen {
				padding-right: 15px;
				text-align: right;
				padding: 23px 0;
			}
			.day {
				width: 70%;
				height: 25px;
				line-height: 25px;
				text-align: left;
				margin-top: 5px;
				background: url(../../icon/jiaobiao_down.png) no-repeat 32% center;
				background-size: 10px;
			}
			.day_title {
				padding: 2px 4px;
				color: #06bcff;
			}
			.line-div {
				width: 70%;
				height: 15px;
				border-left: 2px solid #06bcff;
				margin-left: 20.5%
			}
			.line_fenge_div {
				height: 24px;
			}
			.line_fenge_left {
				padding-right: 15px;
				text-align: right;
				padding: 3px 0;
				width: 12%;
				float: left;
			}
			.line_fenge_right {
				float: left;
				width: 73%;
				margin-left: 13px;
				padding: 8px 0 15px 15px;
				border-left: 2px solid #06bcff;
			}
			.yuefen p.yu_date {
				color: #333;
				font-weight: bold;
			}
			.jifenSpan {
				/*float: left;*/
				margin-left: 5px;
				color: red
			}
			.top-chart-div {
				height: 250px;
			}
			::-webkit-scrollbar {
				width: 0px
			}
			.guijiItem_clock {
				height: 32px;
				line-height: 32px;
				/* cursor: pointer; */
				overflow: hidden;
			}
			.noSign {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 90%;
			}
			.noSign img {
				max-width: 80%;
				display: inline-block;
			}
			.loadFailure {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 90%;
			}
			.loadFailure img {
				max-width: 90%;
				display: inline-block;
			}
			.line-div-two {
				height: 1px;
				width: 100%;
				border-top: 1px solid #dedede;
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
			}
			/*mui部分*/
			.mui-table-view {
				position: relative;
				margin-top: 0;
				margin-bottom: 0;
				padding-left: 0;
				list-style: none;
				background-color: #fff;
			}
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 11px 15px;
				-webkit-touch-callout: none;
			}
			.mui-table-view .mui-media-object {
				line-height: 42px;
				max-width: 42px;
				height: 42px;
			}
			.mui-pull-left {
				float: left;
			}
			.mui-table-view .mui-media-object.mui-pull-left {
				margin-right: 10px;
			}
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0px;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #ededed;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span>我的足迹</span>
			<a class="base_right_item base_hide_item"> </a>
		</div>
		<div style="margin-top: 66px" ></div>
		<div class="top_div" >
			<div class="top-tag-div" onclick="openRule()">
				<img class="question-icon" src="../../image/icon_question.png">
				积分规则
			</div>
			<div class="top-content-div" id="top_chart_div" >
				<div id="top_chart" class="top-chart-div" ></div>
			</div>
		</div>
		<div class="segment-content">
			<div id="selectBar" class="row hightitem tabbar" >
				<div class="col base_dark_grey base_content_font" id="col1" tapmode onclick="tabswitch(1)">
					个人足迹
					<div class="indicator-super-div">
						<div class="indicator" id="indicator1"></div>
					</div>
				</div>
				<div class="col base_dark_grey base_content_font"  id="col2" tapmode onclick="tabswitch(2)">
					学生积分排行
					<div class="indicator-super-div">
						<div class="indicator" id="indicator2"></div>
					</div>
				</div>
			</div>
			<div class="line-div-two"></div>
		</div>
		<div id="Tab1" style="display: block;">
			<div class="timeline" >
				<ul class="clearfix guijiBd year_list"></ul>
			</div>
		</div>
		<div id="Tab2" style="display: none;">
			<div class="list-div">
				<ul id="AccmulatePointsTableView" class="mui-table-view"></ul>
				<div class="load-more-div" style="display: none">
					<p class="load-more-cell base_dark_grey_shallow base_content_font"  onclick="loadMoreData()">
						点击加载更多
					</p>
				</div>
				<div class="noSign" hidden="hidden" id="noData">
					<img src="../../image/icon_no_data.png" width="60%">
					<p class="font16 top_15 base_dark_grey" >
						暂无数据
					</p>
				</div>
				<div class="loadFailure" hidden="hidden" id="noNet">
					<img src="../../image/icon_img01.png" width="60%">
					<p class="" >
						数据加载失败
					</p>
					<p>
						请检查您的网络
					</p>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
						重新加载
					</button>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/personalFootprint.js"></script>
	<script type="text/javascript" src="../../script/personalFootprint_theacher.js"></script>
	<script type="text/javascript">
		var page = 1;
		var row = 10;
		var refreshCount = 0;
		var chapterArr = new Array();
		var sumPoint = 0;
		apiready = function() {
			//			setupSubframe();
			tabswitch(1);
			loadTopChartData();
			loadNewStudentListData();
			setupYearList();
		}
		//获得学生积分列表新数据
		function loadNewStudentListData() {
			page = 1;
			loadStudentListData();
		}

		//获得学生积分列表更多数据
		function loadMoreData() {
			page++;
			loadStudentListData();
		}

		//刷新数据
		function refreshData() {
			$('#noNet').hide();
			showProgress();
			loadNewStudentListData();
		}

		//获取头部chart图的数据
		function loadTopChartData() {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
			};
			cfnetppPOST(url_getTeacherPointTotal, param, true, function(data, status) {
				hideProgress();
				if (status == 'success') {
				        
						
					if (data.code == 200||data.code == 102) {
						var list = data.data;
						var total = data.total
						if (list != null && list != '' && list != '[]' && list.length > 0) {
							var seriesArr = AddSeriesArr(list);
							var legendArr = AddlegendArr(list);
							SetTeacherTopChartUI(legendArr, seriesArr, total);
						}
					} else {
					
					
					
					}
				} else {
				}
			});
		}

		//获取学生积分列表数据
		function loadStudentListData() {
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				page : page,
				rows : row,
			};
			cfnetppPOST(url_getTeacherForStudentPointList, param, false, function(data, status) {
				hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					$('#noNet').hide();
					if (data.code == 200) {
						$('#noData').hide();
						var list = data.data;
						if (list != null && list.length > 0) {
							$('.load-more-div').show();
							SetStudentListUI(list)
							refreshCount = list.length;
						} else {
							if (page == 1) {
								$('#AccmulatePointsTableView').html('');
								$('#noData').show();
								$('#noNet').hide();
							} else {
								api.refreshHeaderLoadDone();
								ShowToast('暂无更多数据哦');
								$('.load-more-div').hide();
								$('#noData').hide();
								$('#noNet').hide();
							}
						}
					} else {
						if (page == 1) {
							$('#AccmulatePointsTableView').html('');
							$('.load-more-div').hide();
							$('#noData').show();
							$('#noNet').hide();
						} else {
							api.refreshHeaderLoadDone();
							$('.load-more-div').hide();
							ShowToast('暂无更多数据哦')
							$('#noData').hide();
							$('#noNet').hide();
						}
					}
				} else {
					$('#AccmulatePointsTableView').html('');
					$('.load-more-div').hide();
					$('#noNet').show();
				}
			});
		}

		//获取年份数据
		function setupYearList() {
			var date = new Date;
			var year = parseInt(date.getFullYear()) - 2017;
			var nowYear = parseInt(date.getFullYear());
			$('#year_list').html('');
			var subChapterHtmlStr = "";
			for (var i = 0; i < year + 1; i++) {
				var chapterData = nowYear - i;
				subChapterHtmlStr += setYearUi(i + 1, chapterData);
				loadMonthData(i + 1, chapterData);
			}
			$('.year_list').append(subChapterHtmlStr);
			$(".guijiItemHd").click(function() {
				if ($(this).next(".month_list").is(":hidden")) {
					$(this).next(".month_list").stop(true, true).slideDown();
					$(this).find(".year").css("background", "#06bcff url(../../icon/jiaobiao_down2.png) no-repeat 93% center");
				} else {
					$(this).next(".month_list").stop(true, true).slideUp();
					$(this).find(".year").css("background", "#06bcff url(../../icon/jiaobiao_up2.png) no-repeat 93% center");
				}
				$(this).find(".year").css("background-size", "10px");
			})
		}

		//加载月份数据
		function loadMonthData(index, year) {
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				year : year,
			};
			cfnetppPOST(url_getContrailMonth, params, true, function(data, status) {
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						var chapterlist = data.data;
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
							//						    $('.timeline').show();
							chapterArr = chapterlist;
							setupMonthList(chapterArr, year);
							//
						} else {
							$('.timeline').hide();
							//
						}
					} else {
					}
				} else {
				}
			});
		}

		//获取当月存在轨迹的日期
		function loadDayData(index, month, year) {
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				year : year,
				month : month,
			};
			cfnetppPOST(url_getContrailDay, params, true, function(data, status) {
				if (status == 'success') {
					if (data.code == 200) {
						var chapterlist = data.data;
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
							setupDayList(month, chapterlist, year);
						}
					} else {
					}
				} else {
				}
			});
		}

		//获取每日的详情数据
		function loadHourData(index, month, year, day) {
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				year : year,
				month : month,
				day : day
			};
			cfnetppPOST(url_getPointsContrail, params, true, function(data, status) {
				if (status == 'success') {
					if (data.code == 200) {
						var chapterlist = data.data;
						if (chapterlist != null && chapterlist.constructor == Array && chapterlist.length > 0) {//判断章节数组是否有效
							setupHourList(day, chapterlist, month);
						}
					} else {
					}
				} else {
				}
			});
		}
         //返回页面
		function backClick() {
			api.closeWin();
		}
	</script>
</html>